import {
    BrowserRouter as Router,
    Link,
    useLocation,
    useHistory
} from "react-router-dom";

export default function () {
    return (
        <Router>
            <QueryParamsDemo />
        </Router>
    );
}
//URLSearchParams 为浏览器内置API
function useQuery() {
    console.log("useLocation:");
    console.log(useLocation());
    console.log("useHistory:");
    console.log(useHistory());
    return new URLSearchParams(useLocation().search);
}

function QueryParamsDemo() {
    let query = useQuery();
    console.log("query:");
    console.log(query);
    return (
        <div>
            <div>
                <h2>Accounts</h2>
            </div>
            <ul>
                <li>
                    <Link to="/account?name=netflix">Netflix</Link>
                </li>
                <li>
                    <Link to="/account?name=zillow-grou">Zillow Grou</Link>
                </li>
                <li>
                    <Link to="/account?name=yahoo">Yahoo</Link>
                </li>
                <li>
                    <Link to="/account?name=modus-create">Modus Create</Link>
                </li>
            </ul>
            {/* 显示名称 */}
            <Child name={query.get("name")} />
        </div>
    );
}

function Child({ name }) {
    return (
        <div>
            {
                name ? (<h3>The <code>name</code> in the query string is '{name}'</h3>) : (<h3>There is no name in the query string</h3>)
            }
        </div>
    );
}